<template>
	<!-- 随手拍录入 -->
	<view class="container">
	    <view class="example">
	      <uni-forms ref="form" :model="formData" labelWidth="80px">
			<uni-forms-item label="随手拍类型" name="integralType">
				<uni-data-select v-model="formData.integralType" :localdata="seleteData" required>
				</uni-data-select>
			</uni-forms-item>  
	        <uni-forms-item label="随手拍图片" name="images">
			  <button @click="chooseImage">选择图片</button>
			  <image v-for="(image, index) in formData.images" :src="image" :key="index" mode="aspectFit"></image>
	        </uni-forms-item>
	       
	        <uni-forms-item label="随手拍描述" name="integralContent">
	          <uni-easyinput v-model="formData.integralContent" placeholder="请输入随手拍描述" />
	        </uni-forms-item>

	      </uni-forms>
	      <button type="primary" @click="submit">提交</button>
	    </view>
	  </view>
</template>

<script>
//引入api接口方法 例：import foo from "bar"
	
	export default {
	  data() {
	    return {
		  seleteData:[{text:"1111",value:"1"},{text:"2222",value:"2"}],
	      formData: {
	        integralType: "",
	        images: [], // 存储选择的图片路径
			integralContent:""
	      },
	      rules: {
	        integralType: {
	          rules: [{
	            required: true,
	            errorMessage: '随手拍类型不能为空'
	          }]
	        },
	        images: {
	          rules: [{
	            required: true,
	            errorMessage: '请上传随手拍图片'
	          }]
	        },
	        integralContent: {
	          rules: [{
	            required: true,
	            errorMessage: '随手拍描述不能为空'
	          }]
	        }
	      }
	    }
	  },
	  onLoad() {
	  },
	  onReady() {
	    this.$refs.form.setRules(this.rules)
	  },
	  methods: {
		chooseImage(){
			let that=this
			uni.chooseImage({
				count: 6, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album','camera'], //从相册选择,相机
				success: function (res) {
					console.info(that.formData.images)
					that.formData.images.push(res.tempFilePaths);
				},
				fail: (err) => {
					console.log('选择图片失败', err);
				}
			});

		},
	    
	    submit(ref) {
	      this.$refs.form.validate().then(res => {
	        //写保存方法
	      })
	    }
	  }
	}
</script>

<style>
	page {
	  background-color: #ffffff;
	}
	
	.example {
	  padding: 15px;
	  background-color: #fff;
	}
	
	.segmented-control {
	  margin-bottom: 15px;
	}
	
	.button-group {
	  margin-top: 15px;
	  display: flex;
	  justify-content: space-around;
	}
	
	.form-item {
	  display: flex;
	  align-items: center;
	  flex: 1;
	}
	
	.button {
	  display: flex;
	  align-items: center;
	  height: 35px;
	  line-height: 35px;
	  margin-left: 10px;
	}
</style>